<template>
  <div>
    <el-dialog title="选择测评" :visible.sync="isDistribution" width="60%" :before-close="handleClose" :close-on-click-modal='false'>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="'平台推荐组合（'+this.numList.buildSelf+'）'" name="recommended">
          <recommended v-if="activeName === 'recommended'" @haveChosen="haveChosen"></recommended>
        </el-tab-pane>
        <el-tab-pane :label="'自建测评组合（'+this.numList.recommend+'）'" name="selfBuilt">
          <selfBuilt v-if="activeName === 'selfBuilt'" @haveChosen="haveChosen"></selfBuilt>
        </el-tab-pane>
        <el-tab-pane :label="'单个测评量表（'+this.numList.personal+'）'" name="single">
          <single v-if="activeName === 'single'" @haveChosen="haveChosen"></single>
        </el-tab-pane>
        <el-tab-pane :label="'测评计划（'+this.numList.planCount+'）'" name="plan">
          <plan v-if="activeName === 'plan'" @haveChosen="haveChosen"></plan>
        </el-tab-pane>
      </el-tabs>
      <div class="distribution"><span class="distributionTitle">已选中</span><span class="distributionPrompt">共{{this.select.totalNumber}}个量表，已选中{{this.select.selected}}个，已选{{this.select.num}}题，预计{{this.select.time}}分钟完成</span></div>
      <simple-table :tableConfig="tableConfig" :tableData="selectTableData" @haveChosen="haveChosen"></simple-table>
      <div class="distribution"><span class="distributionTitle">测评计划信息</span></div>
        <el-row>
          <el-col :span="16">
            <el-form ref="form" :rules="rules" :model="form" label-width="130px" label-position="right">
              <el-form-item label="测评计划名称" prop="title">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="学生端显示名称" prop="student_title">
                <el-input v-model="form.student_title"></el-input>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00"> </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间" prop="end_time">
                <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00"> </el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="check()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import simpleTable from '@/components/simpleTable.vue'
import recommended from './recommended.vue'
import selfBuilt from './selfBuilt.vue'
import single from './single.vue'
import plan from './plan.vue'
import {APINUMBERCOMBINATIONS} from '@/common/api.js'
export default {
  props: ['isDistribution', 'plan_type', 'list', 'distributionType', 'distributionType_range_object'],
  components: {
    simpleTable,
    recommended,
    selfBuilt,
    single,
    plan
  },
  data () {
    return {
      expireTimeOption: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            var now = new Date()
            var year = now.getFullYear()
            var month = now.getMonth() + 1
            var day = now.getDate()
            var time = year + '-' + month + '-' + day + ' 00:00:00'
            picker.$emit('pick', time)
          }
        }],
        disabledDate (date) {
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      },
      rules: {
        title: [
          { required: true, message: '请输入测评计划名称', trigger: 'blur' }
        ],
        student_title: [
          { required: true, message: '请输入学生端显示名称', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ]
      },
      form: {
        title: '',
        student_title: '',
        plan_type: null,
        public_ids: '',
        start_time: '',
        end_time: '',
        guidance_note: '',
        range_type: '',
        range_object: ''
      },
      numList: {
        recommend: 0,
        buildSelf: 0,
        personal: 0,
        planCount: 0
      },
      activeName: 'recommended',
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'student_title', name: '名称'},
          {id: 'topics_num', name: '题量'},
          {id: 'count', name: '时长'}
        ]
      },
      selectTableData: [],
      select: {
        totalNumber: 0,
        selected: 0,
        num: 0,
        time: 0
      }
    }
  },
  created () {
    this.numListFn()
    this.form.range_type = this.distributionType
    this.form.range_object = this.distributionType_range_object
  },
  methods: {
    numListFn () {
      APINUMBERCOMBINATIONS(
      ).then((res) => {
        this.numList = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    haveChosen (val, totalNumber) {
      this.select.totalNumber = totalNumber
      this.selectTableData = val
      this.select.selected = this.selectTableData.length
      this.select.num = 0
      this.select.time = 0
      this.selectTableData.forEach(item => {
        this.select.num += Number(item.topics_num)
        this.select.time += Number(item.count)
      })
      if (this.activeName === 'plan') {
        this.form.title = val[0].plan_title
        this.form.student_title = val[0].student_title
        this.form.start_time = val[0].start_time
        this.form.end_time = val[0].end_time
      }
    },
    handleClick () {
      this.selectTableData = []
      this.select = {}
      this.form.title = ''
      this.form.student_title = ''
      this.form.plan_type = null
      this.form.public_ids = ''
      this.form.start_time = ''
      this.form.end_time = ''
      this.form.guidance_note = ''
    },
    handleClose () {
      this.$emit('noDistribution')
    },
    close () {
      this.$emit('noDistribution')
    },
    check () {
      if (this.activeName === 'recommended') {
        this.form.plan_type = 1
      } else if (this.activeName === 'selfBuilt') {
        this.form.plan_type = 2
      } else if (this.activeName === 'single') {
        this.form.plan_type = 3
      } else if (this.activeName === 'plan') {
        this.form.plan_type = 4
      }
      let arr = []
      this.selectTableData.forEach(item => {
        arr.push(item.id)
      })
      this.form.public_ids = arr.toString()
      // APIDISTRIBUTION(
      //   this.form
      // ).then((res) => {
      //   if (res.status === 1) {
      //     this.$message.success(res.msg)
      //     this.$emit('noDistribution', 1)
      //   } else {
      //     this.$message.error(res.msg)
      //   }
      // }).catch((err) => {
      //   this.$message.error(err.msg)
      // })
    }
  }
}
</script>
<style>
.distribution{
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
}
</style>
